<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>点点IM</title>
    <link rel="stylesheet" type="text/css" href="../css/chat-mobile.css"/>
    <link rel="stylesheet" href="../js/jquery-ui/jquery-ui.min.css"/>
    <link href="../css/toastr.min.css" rel="stylesheet"/>
</head>
<body>
<div class="main">
    <div class="header">
        <span class="nickname">消息</span><span class="group-member-num hide"></span>
        <i class="left-arrow hide" onclick="goBack()"></i>
        <i id="add-operation" class="add-operation"></i>
        <ul id="more-operation" class="more-operation hide">
            <span class="popper_arrow"></span>
            <li class="more-item" onclick="openCreateGroupDialog()">
                <i class="create-group"></i>
                <span>创建群聊</span></li>
            <li class="more-item" onclick="addFriendClick()">
                <i class="add-friend"></i>
                <span>添加好友</span></li>
        </ul>
        <i id="msg-more" class="msg-more hide" onclick="loadMsgInfoPage()"></i>
    </div>
    <div id="container">
        <!-- 动态加载元素 -->
    </div>
    <div class="footer">
        <div id="bottom-msg-btn" class="bottom-btn bottom-msg-btn bottom-msg-btn-click" onclick="bottomMsgBtnClick()">消息<label
                id="top-chat-unread" unread-count="0" class="top-unread top-chat-unread hide">0</label></div>
        <div id="bottom-friend-btn" class="bottom-btn bottom-friend-btn" onclick="bottomFriendBtnClick()">好友<label
                id="top-friend-unread" unread-count="0" class="top-unread top-friend-unread hide">0</label></div>
        <div id="bottom-my-btn" class="bottom-btn bottom-my-btn" onclick="bottomMyBtnClick()">我</div>
    </div>

    <!-- 创建群聊对话框 -->
    <div id="create-group-dialog" style="display: none">
        <div class="create-group">
            <div class="user-search">
                <div class="search-content">
                    <input id="search-friend-input" class="search-input" type="text" placeholder="输入手机号或昵称"/>
                </div>
                <button class="primarybtn" onclick="searchFriendClick()">查找</button>
            </div>
            <div class="search-user-list">
                <ul id="search-friend-list">
                    <!-- 搜索用户列表 -->
                </ul>
            </div>
            <div class="create-group-bottom">
                <button class="create-group-btn" disabled onclick="createGroup()">完成</button>
            </div>
        </div>
    </div>
    <!-- 添加好友对话框 -->
    <div id="add-friend-dialog" style="display: none">
        <div class="addfriend">
            <div class="user-search">
                <div class="search-content">
                    <input id="search-input" class="search-input" type="text" placeholder="输入手机号或昵称"/>
                </div>
                <button class="primarybtn" onclick="addFriendSearchClick()">查找</button>
            </div>
            <div class="search-user-list">
                <ul id="search-user-list">
                    <!-- 搜索用户列表 -->
                </ul>
            </div>
        </div>
    </div>
    <!-- 添加好友申请对话框 -->
    <div id="add-friend-apply-dialog" class="addbody" style="display: none">
        <div class="add-content">
            <div class="add-info">
                <div class="el-image add-avatar">
                    <img id="add-avatar" src="../ico/presion.png" class="el-image-inner" alt="头像"/>
                </div>
                <div class="add-name">
                    <p id="add-nick" class="add-nick">LLLQQQ</p>
                    <p id="add-area" class="add-area">浙江省 温州市</p>
                </div>
            </div>
            <div class="add-greet">
                <div class="greet-content">
                    <input id="friend-id" type="hidden"/>
                    <input id="source" type="hidden"/>
                    <label for="applyReason">申请描述</label>
                    <textarea id="applyReason" cols="35" rows="2" maxlength="30"></textarea>
                    <label for="remark">设置备注</label>
                    <input id="remark" type="text" placeholder="备注" onfocus="remarkFocus(this)"/>
                    <label for="label">标签</label>
                    <input id="label" type="text" placeholder="添加标签"/>
                </div>
                <div style="text-align: right">
                    <button class="primarybtn" onclick="sendAddFriendApplyClick()">发送</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 转发消息用户对话框 -->
    <div id="relay-msg-user-dialog" style="display: none">
        <div class="relay-msg-user">
            <div class="user-search">
                <div class="search-content">
                    <input id="relay-keyword-input" class="search-input" type="text" placeholder="输入昵称"/>
                </div>
                <button class="primarybtn" onclick="searchRelayUserList()">查找</button>
            </div>
            <div id="relay-user-tabs">
                <ul>
                    <li><a href="#relay-chat-list">最近聊天</a></li>
                    <li><a href="#relay-user-list">好友</a></li>
                </ul>
                <div id="relay-chat-list" class="search-user-list">
                    <ul class="relay-chat-list-ul">
                        <!-- 搜索最近聊天列表 -->
                        <li>最近聊天</li>
                    </ul>
                </div>
                <div id="relay-user-list" class="search-user-list">
                    <ul class="relay-user-list-ul">
                        <!-- 搜索用户列表 -->
                        <li>好友</li>
                    </ul>
                </div>
            </div>
            <div class="replay-msg-bottom">
                <button class="replay-msg-btn" disabled onclick="relayMsgBtnClick(this)">转发</button>
            </div>
        </div>
    </div>

    <!--  视频播放对话框  -->
    <div class="video-dialog" style="display: none;">
        <div class="ui-widget-overlay ui-front video-mask"></div>
        <div class="video-play">
            <video id="video" src="" preload="auto" controls="controls" autoplay="autoplay"></video>
            <img onclick="closeVideo()" class="video-close" src="../ico/x-red.png" width="25" height="25" alt="关闭"/>
        </div>
    </div>
    <!-- 修改我的信息对话框 -->
    <div id="modify-myinfo-dialog" class="modify-body" style="display: none">
        <div class="modify-content">
            <div class="modify-info">
                <div class="el-image modify-avatar">
                    <img id="modify-avatar" src="https://res.tiocloud.com/avatar/tio/20200708/7.jpg"
                         class="el-image-inner" alt="头像">
                </div>
                <div class="modify-name">
                    <p id="modify-nick" class="modify-nick">LLLQQQ</p>
                    <p id="modify-area" class="modify-area">浙江省 温州市</p>
                </div>
            </div>
            <div class="modify-greet">
                <div class="greet-content">
                    <label for="nickname">昵称</label>
                    <input id="nickname" type="text" placeholder="昵称" autocomplete="off"/>
                    <label for="gender">性别</label>
                    <select id="gender">
                        <option value="1">男</option>
                        <option value="2">女</option>
                        <option value="0" selected>保密</option>
                    </select>
                </div>
                <div style="text-align: right">
                    <button class="primarybtn" onclick="saveMyInfoClick()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改头像对话框 -->
    <div id="modify-avatar-dialog" style="display: none">
        <div class="model-body tailoring-container">
            <div class="tailoring-container-preview">
                <div class="tailoring-box-parcel">
                    <img id="tailoringImg" alt="">
                </div>
            </div>
            <div class="tailoring-bottom-btn">
                <div class="btn-group-left">
                    <div class="btn-group">
                        <button title="向左旋转45度" class="commonbtn cropper-rotate-left-btn" data-method="rotate"
                                data-option="-45" onclick="cropperOper(this)"></button>
                        <button title="向右旋转45度" class="commonbtn cropper-rotate-right-btn" data-method="rotate"
                                data-option="45" onclick="cropperOper(this)"></button>
                    </div>
                    <div class="btn-group">
                        <button title="左右翻转" class="commonbtn cropper-scaleX-btn" data-method="scaleX"
                                data-option="-1" onclick="cropperOper(this)"></button>
                        <button title="上下翻转" class="commonbtn cropper-scaleY-btn" data-method="scaleY"
                                data-option="-1" onclick="cropperOper(this)"></button>
                    </div>
                    <div class="btn-group">
                        <button title="重置" class="commonbtn cropper-reset-btn" data-method="reset"
                                onclick="cropperOper(this)"></button>
                    </div>
                </div>
                <div class="btn-group-right">
                    <button title="选择图片" class="primarybtn" onclick="modifyAvatarClick()">选择图片</button>
                    <input type="file" accept="image/*" name="file" id="chooseImg" class="hide"
                           onchange="modifyAvatarFileChange(this)">
                    <button title="确 定" class="primarybtn" onclick="cropImageConfirmClick()">确 定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改密码对话框 -->
    <div id="modify-pwd-dialog" class="modify-body" style="display: none">
        <div class="modify-content">
            <div class="modify-greet">
                <div class="greet-content">
                    <label for="oldPwd">原密码</label>
                    <input id="oldPwd" type="password" placeholder="请输入原密码" autocomplete="new-password"/>
                    <label for="newPwd">新密码</label>
                    <input id="newPwd" type="password" placeholder="请输入新密码" autocomplete="new-password"/>
                    <label for="validNewPwd">确认新密码</label>
                    <input id="validNewPwd" type="password" placeholder="请确认新密码" autocomplete="new-password"/>
                </div>
                <div style="text-align: right">
                    <button class="primarybtn" onclick="modifyPwdClick()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--视频通话对话框-->
    <div id="call-video-dialog" class="call-container hide">
        <div class="call-frosted-glass"></div>
        <div class="call-dialog-min-ico" onclick="switchMinimize(this)"></div>
        <div class="call-dialog-min-label hide">等待接听...</div>
        <div class="call-avatar-bg">
            <img class="avatar-a" src="https://res.tiocloud.com/avatar/tio/20200708/9.jpg" alt="头像"/>
            <div class="nickname">张三</div>
        </div>
        <video id="remoteVideo" class="call-remote-video hide" playsinline autoplay onclick="remoteVideoClick(this)"></video>
        <video id="localVideo" class="call-local-video call-local-video-mirror hide" playsinline autoplay muted onclick="localVideoClick(this)"></video>
        <div class="call-local hide">
            <label class="call-waiting-label">等待对方接受视频邀请</label>
            <div class="call-btns">
                <div class="call-btn ">
                    <button class="call-cancel call-opr" onclick="hangup('cancel','VIDEO_CALL')"></button>
                    <div>取消</div>
                </div>
            </div>
        </div>
        <div class="call-remote hide">
            <label class="call-waiting-label">邀请你视频通话</label>
            <div class="call-btns">
                <div class="call-btn call-btn-left">
                    <button class="call-refuse call-opr" onclick="hangup('refuse','VIDEO_CALL')"></button>
                    <div>拒绝</div>
                </div>
                <div class="call-btn call-btn-right">
                    <button class="call-accept call-opr" onclick="acceptCall('VIDEO_CALL')"></button>
                    <div>接听</div>
                </div>
            </div>
        </div>
        <div class="call-remote-accept hide">
            <label class="call-timing-label">00:00</label>
            <div class="call-btns">
                <div class="call-btn-top">
                    <div class="call-btn call-btn-left-35">
                        <button class="call-microphone-on call-opr" onclick="microphoneTurnedOnOff(this)"></button>
                        <div>麦克风已开</div>
                    </div>
                    <div class="call-btn">
                        <button class="call-camera-on call-opr" onclick="cameraTurnedOnOff(this)"></button>
                        <div>摄像头已开</div>
                    </div>
                    <div class="call-btn call-btn-right-35">
                        <button class="call-flip-camera call-opr" facing-mode="user" onclick="flipCamera(this)"></button>
                        <div>翻转</div>
                    </div>
                </div>
                <div class="call-btn-bottom">
                    <div class="call-btn">
                        <button class="call-hangup call-opr" onclick="hangup('hangup','VIDEO_CALL')"></button>
                        <div>挂断</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--语音通话对话框-->
    <div id="call-audio-dialog" class="call-container hide">
        <div class="call-frosted-glass"></div>
        <div class="call-dialog-min-ico" onclick="switchMinimize(this)"></div>
        <div class="call-dialog-min-label hide">等待接听...</div>
        <div class="call-avatar-bg">
            <img class="avatar-a"
                 src="https://oss.pinmallzj.com/image/chat-msg/2024-07-04/%E8%BD%AE%E6%92%AD%E5%9B%BE2-PNR08Vd0ZNdN.jpg"
                 alt="头像"/>
            <div class="nickname">张三</div>
        </div>
        <video id="remoteAudio" class="call-remote-audio hide" playsinline autoplay></video>
        <video id="localAudio" class="call-local-audio hide" playsinline autoplay muted></video>
        <div class="call-local hide">
            <label class="call-waiting-label">等待对方接受语音邀请</label>
            <div class="call-btns">
                <div class="call-btn ">
                    <button class="call-cancel call-opr" onclick="hangup('cancel','AUDIO_CALL')"></button>
                    <div>取消</div>
                </div>
            </div>
        </div>
        <div class="call-remote hide">
            <label class="call-waiting-label">邀请你语音通话</label>
            <div class="call-btns">
                <div class="call-btn call-btn-left">
                    <button class="call-refuse call-opr" onclick="hangup('refuse','AUDIO_CALL')"></button>
                    <div>拒绝</div>
                </div>
                <div class="call-btn call-btn-right">
                    <button class="call-accept call-opr" onclick="acceptCall('AUDIO_CALL')"></button>
                    <div>接听</div>
                </div>
            </div>
        </div>
        <div class="call-remote-accept hide">
            <label class="call-timing-label">00:00</label>
            <div class="call-btns">
                <div class="call-btn">
                    <button class="call-hangup call-opr" onclick="hangup('hangup','AUDIO_CALL')"></button>
                    <div>挂断</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 jQuery 库 -->
<script src="../js/jquery/jquery-3.7.1.min.js"></script>
<script src="../js/jquery-ui/jquery-ui.min.js"></script>
<script src="../js/jquery/jquery.cookie-1.4.1.min.js"></script>
<script src="../js/jquery/jquery-insert-at.js"></script>
<script src="../js/jquery-ui/jquery-ui-mobel-draggable.js"></script>
<script src="../js/toastr.min.js"></script>
<script src="../js/jquery-ui/resources/datepicker/i18n/datepicker-zh-CH.js"></script>
<!--mTouch移动端 ( 兼容pc端) 手势操作库，解决zepto库“点透”的bug，并支持事件委托 (https://github.com/DMQ/mTouch)-->
<!--<script src="../js/mobile/mtouch-dom.min.js"></script>-->
<! -- 引入 contextmenu 库 -->
<script src="../js/contextmenu/jquery.contextMenu.min.js"></script>
<script src="../js/contextmenu/jquery.ui.position.js"></script>
<link rel="stylesheet" href="../js/contextmenu/jquery.contextMenu.min.css">
<!--图片裁切插件-->
<script src="../js/cropper/cropper.min.js"></script>
<link rel="stylesheet" href="../js/cropper/cropper.min.css"/>
<script src="../js/cropper/jquery-cropper.min.js"></script>
<!-- 引入自定义常量参数基础库 -->
<script src="../js/moment.js"></script>
<script src="../js/custom-log.js"></script>
<script src="../js/base.js"></script>
<script src="../js/upload.js"></script>
<script src="../js/emoji.js"></script>
<script src="../js/mobile/chat-index.js"></script>
<!--流式请求处理js-->
<script src="../js/sse/sse.js"></script>
<script src="../js/sse/deepseek-sse-util.js"></script>

<!--视频通话和发送信息js-->
<script src="../js/im/tio/tiows.js"></script>
<script src="../js/im/imHandler.js"></script>
<script src="../js/im/im.js"></script>
<script src="../js/im/webrtc-util.js"></script>

<!--手机端查看浏览器控制台-->
<script src="../js/jsdelivr-eruda.js"></script>
<script>
    if (env === 'local') {
        eruda.init();
    }
</script>
</body>
</html>